<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!--移动端预览-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的信息</title>
    <!--通过CDN引入Semantic-UI-->
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="https://i.icomoon.io/public/temp/d0ca2ba9f1/UntitledProject/style.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <style>
        /* 这里可以添加一些简单的样式，比如字体、颜色、布局等 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;

        }

        h1 {
            color: #333;

        }

        .book-details {
            margin-bottom: 20px;
            background-color:#ffffcc;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .book-details label {
            display: inline-block;
            width: 120px;
            text-align: right;
            font-weight: bold;
            font-size: 16px;
        }

        .description {
            margin-top: 20px;
            background-color: #ccccff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .intro-text {
            font-family: Arial, sans-serif; /* 设置字体 */
            font-size: 16px; /* 设置字体大小 */
        }
        .book-title{
            font-family: Arial, sans-serif; /* 设置字体 */
            font-size: 16px; /* 设置字体大小 */
        }
    </style>

</head>
<body>
<nav class="ui m-bg attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h2 class="ui purple header item">公共智能书柜</h2>
            <a href="#" th:href="@{/index}" class=" m-item item m-mobile-hide m-black"><i class=" user secret icon"></i>首页</a>
            <a href="#" th:href="@{/books}" class="m-item item m-mobile-hide m-black"><i class="user secret icon"></i>图书信息</a>
            <a href="#" th:href="@{/goodBooks}" class="m-item item m-mobile-hide m-black"><i class="user secret icon"></i>推荐好书</a>
            <a href="#" th:href="@{/borrow}" class="m-item item m-mobile-hide m-black"><i class="users secret icon"></i>我的借阅</a>
              <a href="#" th:href="@{/alter}" class="m-item item m-mobile-hide m-black"><i class="users secret icon"></i>个人中心</a>
            <div class="right m-item m-mobile-hide menu pink">
                <div class="ui right dropdown purple item">
                    <div class="text" >
                        <i class="user plus icon " style="width: 20px;height: 20px"></i>
                        <label th:text="${userById.getStuname()}"></label>
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" th:href="@{/logouts}" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div class="m-container-small m-padded-tb-big animated fadeInUp" >
    <!--ui提供的container:提供的宽度固定，显示最好的显示效果-->
    <div class="ui container">
        <div class="ui stackable grid">
<!--            <div class="two wide column animated rotateInDownLeft">-->

<!--            </div>-->
            <div class="ui bottom attached segment">

            <h1>图书信息详情</h1>

                <div class="book-details">
                    <div class="ui grid">
                        <div class="eight wide column">
                            <div>
                                <label>书名:</label>
                                <span class="book-title" th:text="${book.getName()}"></span>
                            </div>
                            <div>
                                <label>作者:</label>
                                <span class="book-title" th:text="${book.getAuth()}"></span>
                            </div>
                            <div>
                                <label>当前可借数量:</label>
                                <span class="book-title" th:text="${book.getCount()}"></span>
                            </div>
                        </div>
                        <div class="eight wide column">
                            <div>
                                <label>价格:</label>
                                <span class="book-title" th:text="${book.getPrice()}"></span>
                            </div>
                            <div>
                                <label>ISBN:</label>
                                <span class="book-title" th:text="${book.getIsbn()}"></span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="description">
                        <h2>图书简介</h2>
                        <p class="intro-text" th:text="${book.getJianjie()}"></p>
                </div>
        <!--    <div>
                <label>简介:</label>
                <span th:text="${book.getJianjie()}"></span>

            </div> -->

<!--            <div>-->
<!--                评价：-->
<!--                <div class="product-item" th:each="comment : ${book.getComments()}" >-->

<!--                    <div>-->
<!--                        <span th:text="${comment.getContent()}"></span>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->

                <div id="comment-container" class="ui teal segment">
                    <div>
                        <div class="ui threaded comments" style="max-width: 100%;">
                            <h3 class="ui dividing header">评论</h3>
                            <div class="comment" th:each="comment : ${book.getComments()}">
                                <a class="avatar">
                                    <img src="../static/image/user.png" th:src="@{/image/user.png}">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${comment.nickname}">Matt</span>
                                        <!--                                        <div class="ui mini basic red left pointing label m-padded-mini" th:if="${comment.adminComment}">管理员</div>-->
                                    </a>
                                    <div class="metadata">
                                        <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                        <span class="date" th:text="'评分:'+ ${comment.score}"></span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">
                                        How artistic!
                                    </div>
                                    <div class="actions">
                                        <!--                                        <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a>-->
                                        <a class="delete" href="#" th:if="${userById.getRole()=='admin'}" th:href="@{/comment/{param}/{param2}/delete(param=${comment.id},param2=${comment.bookId})}" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">删除</a>
                                    </div>
                                </div>

                                <!--这里是嵌套的-->
                                <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0">   <!--判断大于0，才显示这块区域-->
                                    <div class="comment" th:each="reply : ${comment.replyComments}">    <!--评论子类-->
                                        <a class="avatar">
                                            <img src="../static/image/user.png" th:src="@{/image/user.png}">
                                        </a>
                                        <div class="content">
                                            <a class="author" >
                                                <span th:text="${reply.nickname}">小红</span>
                                                <!--                                                <div class="ui mini basic red left pointing label m-padded-mini" th:if="${reply.adminComment}">管理员</div>-->
                                                &nbsp;<span th:text="|@ ${reply.parentNickname}|" class="m-teal">@ 小白</span>
                                                <!--显示出某某某@某某某-->
                                            </a>
                                            <div class="metadata">
                                                <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                            </div>
                                            <div class="text" th:text="${reply.content}">
                                                This has been very useful for my research. Thanks as well!
                                            </div>
                                            <div class="actions">
                                                <!--                                                <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>-->
                                                <a class="delete" href="#" th:if="${userById.getRole()=='admin'}" th:href="@{/comment/{param}/{param2}/delete(param=${comment.id},param2=${comment.bookId})}" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/*-->
                            <!--                            <div class="comment">-->
                            <!--                                <a class="avatar">-->
                            <!--                                    <img src="../static/image/user.png">-->
                            <!--                                </a>-->
                            <!--                                <div class="content">-->
                            <!--                                    <a class="author">Elliot Fu</a>-->
                            <!--                                    <div class="metadata">-->
                            <!--                                        <span class="date">Yesterday at 12:30AM</span>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="text">-->
                            <!--                                        <p>This has been very useful for my research. Thanks as well!</p>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="actions">-->
                            <!--                                        <a class="reply">回复</a>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                                <div class="comments">-->
                            <!--                                    <div class="comment">-->
                            <!--                                        <a class="avatar">-->
                            <!--                                            <img src="../static/image/user.png">-->
                            <!--                                        </a>-->
                            <!--                                        <div class="content">-->
                            <!--                                            <a class="author">Jenny Hess</a>-->
                            <!--                                            <div class="metadata">-->
                            <!--                                                <span class="date">Just now</span>-->
                            <!--                                            </div>-->
                            <!--                                            <div class="text">-->
                            <!--                                                Elliot you are always so right :)-->
                            <!--                                            </div>-->
                            <!--                                            <div class="actions">-->
                            <!--                                                <a class="reply">回复</a>-->
                            <!--                                            </div>-->
                            <!--                                        </div>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--                            <div class="comment">-->
                            <!--                                <a class="avatar">-->
                            <!--                                    <img src="../static/image/user.png">-->
                            <!--                                </a>-->
                            <!--                                <div class="content">-->
                            <!--                                    <a class="author">Joe Henderson</a>-->
                            <!--                                    <div class="metadata">-->
                            <!--                                        <span class="date">5 days ago</span>-->
                            <!--                                    </div>-->
                            <!--                                    <div class="text">-->
                            <!--                                        Dude, this is awesome. Thanks so much-->
                            <!--                                    </div>-->
                            <!--                                    <div class="actions">-->
                            <!--                                        <a class="reply">回复</a>-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <!--*/-->

                        </div>
                    </div>

                </div>
                <div class="ui center aligned grid">
                    <div class="center aligned column">
                        <button class="ui purple button" onclick="goBack()">返回</button>
                    </div>
                </div>
<!--                <div class="description">-->
<!--                    <h2>封面</h2>-->
<!--                    <div th:width="200" th:high="200"><img  th:src="${book.img}" alt="" class="ui rounded image"></div>-->
<!--                </div>-->

            </div>
        </div>
    </div>
</div>
<style>
    .vip{
        background-image: url("../image/vip.png");
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        background-size: 100%;
    }
</style>
<br>
<br>
<!--底部footer-->
<footer th:fragment="footer" class="ui m-bg animated fadeInUp inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                </div>
            </div>
            <div class="three wide column">
                <div id="newblog-container">
                </div>
            </div>
            <div class="three wide column">

            </div>
        </div>
        <div class="ui inverted m-black section divider"></div>
    </div>
</footer>

<!--通过CDN引入Semantic-UI(也可通过本地下载引入)-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/js/colourBar.js" th:src="@{/js/colourBar.js}" tppabs="../static/js/colourBar.js"></script>

<script>
    function goBack() {
        window.history.back();
    }
</script>

</body>
</html>